
import React from "react";
import "./Echarts.css"
import ReactECharts from 'echarts-for-react'



const Com = () =>{
    const getBarOption = () => {
      return {
        title:{
          text:"数据分析",
          left:'center'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        tooltip:{
          show:true
        },
        legend:{
          show:true,
          top:30
        },
        series: [
          {
            label:{
              show:true
            },
            name:'2117',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 1, 0.2)'
            }
          },
          {
            label:{
              show:true
            },
            name:'2118',
            data: [10, 220, 10, 8, 107, 310, 10],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 1, 0.2)'
            }
          }
        ]
      };
    } 
    const getLineOption = () =>{
      return {
        title:{
          text:"数据分析",
          left:'center'
        },
        tooltip:{
          show:true
        },
        legend:{
          show:true,
          top:30
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            label:{
              show:true
            },
            name:'a',
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          },
          {
            label:{
              show:true
            },
            name:'b',
            data: [120, 20, 134, 21, 15, 247, 360],
            type: 'line'
          }
        ]
      };
    }
    const getRoundOption = () => {
      return {
        title: {
          text: '出勤率',
          subtext: '2117班级',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '2117出勤率',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '周一' },
              { value: 735, name: '周二' },
              { value: 580, name: '周三' },
              { value: 484, name: '周四' },
              { value: 300, name: '周五' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    }
    const getKOption = () => {
      return {
        xAxis: {
          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
        },
        yAxis: {},
        series: [
          {
            type: 'candlestick',
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42]
            ]
          }
        ]
      };
    }
    return(
        <div>
       <ReactECharts option={getBarOption()} />
       <ReactECharts option={getLineOption()} />
       <ReactECharts className="yuan" option={getRoundOption()} />
       <ReactECharts option={getKOption()} />
        </div>
    )
}


export default Com